<script setup lang="ts">
import {useRouter} from "vue-router";
import {storeToRefs} from "pinia";
import {ElMessageBox} from "element-plus";
import {ArrowDown} from "@element-plus/icons-vue";
import useUserStore from "@/pinia/userStore.ts";

const router = useRouter()
const userStore = useUserStore()
const {userInfo} = storeToRefs(userStore)
const handleLogin = () => {
  userStore.changeDialog(true)
}
const handleLogout = async () => {
  const confirm = await ElMessageBox.confirm('确定要退出登录吗?', '警告').catch(error => error)
  if (confirm === "cancel") return
  userStore.logout()
  router.push('/')
}

const handleCommand = (command: string) => {
  router.push(command)
}
</script>

<template>
  <div class="header">
    <div class="container">
      <div class="logo" @click="$router.push('/')">
        <img src="@/assets/images/logo.png" alt="" title="尚医通">
        <span>尚医通 预约挂号统一平台</span>
      </div>
      <div class="search">
        <slot></slot>
      </div>
      <div class="login">
        <span>帮助中心</span>
        <span @click="handleLogin" v-if="!userInfo.token">登录 | 注册</span>
        <el-dropdown v-else @command="handleCommand">
          <span class="el-dropdown-link">
            <span>{{ userInfo.name }}</span>
            <el-icon class="el-icon--right"><arrow-down></arrow-down></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="/member/cert">实名认证</el-dropdown-item>
              <el-dropdown-item command="/member/order">挂号订单</el-dropdown-item>
              <el-dropdown-item command="/member/patient">就诊人管理</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 70px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
  position: fixed;
  z-index: 1000;
  background-color: #ffffff;


  .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      display: flex;
      align-items: center;
      cursor: pointer;

      img {
        width: 50px;
      }

      span {
        font-size: 22px;
        color: #4490f1;
        margin-left: 10px;
      }
    }

    .search {
      width: 500px;
    }

    .login {
      color: #666666;

      span {
        margin: 0 10px;
        font-size: 14px;
        cursor: pointer;

        &:hover {
          color: #4490f1;
        }
      }

      .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
